// 清除浮动
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

// 宽度
.f-w {
    &-1 {
        width: 1px;
    }
    &-5 {
        width: 5px;
    }
    &-7 {
        width: 7px;
    }
    &-17 {
        width: 17px;
    }
    &-23 {
        width: 23px;
    }
    &-25 {
        width: 25px;
    }
    &-42 {
        width: 42px;
    }
    &-44 {
        width: 44px;
    }
    &-60 {
        width: 60px;
    }
    &-64 {
        width: 64px;
    }
    &-71 {
        width: 71px;
    }
    &-72 {
        width: 72px;
    }
    &-73 {
        width: 73px;
    }
    &-80 {
        width: 80px;
    }
    &-81 {
        width: 81px;
    }
    &-87 {
        width: 87px;
    }
    &-92 {
        width: 92px;
    }
    &-98 {
        width: 98px;
    }
    &-104 {
        width: 104px;
    }
    &-125 {
        width: 125px;
    }
    &-141 {
        width: 141px;
    }
    &-160 {
        width: 160px;
    }
    &-161 {
        width: 161px;
    }
    &-162 {
        width: 162px;
    }
    &-182 {
        width: 182px;
    }
    &-204 {
        width: 204px;
    }
    &-237 {
        width: 237px;
    }
    &-240 {
        width: 240px;
    }
    &-300 {
        width: 300px;
    }
    &-331 {
        width: 331px;
    }
    &-375 {
        width: 375px;
    }
    &-whole {
        width: 100%;
    }
}


// 高度
.f-h {
    &-1 {
        height: 1px;
    }
    &-4 {
        height: 4px;
    }
    &-5 {
        height: 5px;
    }
    &-14 {
        height: 14px;
    }
    &-17 {
        height: 17px;
    }
    &-18 {
        height: 18px;
    }
    &-20 {
        height: 20px;
    }
    &-25 {
        height: 25px;
    }
    &-28 {
        height: 28px;
    }
    &-29 {
        height: 29px;
    }
    &-44 {
        height: 44px;
    }
    &-54 {
        height: 54px;
    }
    &-68 {
        height: 68px;
    }
    &-69 {
        height: 69px;
    }
    &-91 {
        height: 91px;
    }
    &-107 {
        height: 107px;
    }
    &-161 {
        height: 161px;
    }
    &-186 {
        height: 186px;
    }
    &-203 {
        height: 203px;
    }
    &-240 {
        height: 240px;
    }
    &-256 {
        height: 256px;
    }
    &-272 {
        height: 272px;
    }
    &-283 {
        height: 283px;
    }
    &-406 {
        height: 406px;
    } 
    &-1243 {
        height: 1243px;
    }
    &-whole {
        height: 100%;
    }
}

// 行高
.f-lh {
    &-4 {
        line-height: 4px;
    }
    &-14 {
        line-height: 14px;
    }
    &-17 {
        line-height: 17px;
    }
    &-18 {
        line-height: 18px;
    }
    &-20 {
        line-height: 20px;
    }
    &-21 {
        line-height: 21px;
    }
    &-28 {
        line-height: 28px;
    }
    &-29 {
        line-height: 29px;
    }
}

// 水平居中
.f-ta {
    text-align: center;
}

// 垂直居中
.f-va {
    &-b {
        vertical-align: bottom;
    }
}

// 文本阴影
.f-ts {
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}

// 字体大小
.f-size {
    &-10 {
        font-size: 10px;
    }
    &-12 {
        font-size: 12px;
    }
    &-13 {
        font-size: 13px;
    }
    &-14 {
        font-size: 14px;
    }
    &-15 {
        font-size: 15px;
    }
    &-20 {
        font-size: 20px;
    }
    &-30 {
        font-size: 30px;
    }
}

// 字体加粗
.f-w {
    &-100 {
        font-weight: 100;
    }
    &-400 {
        font-weight: 400;
    }
}

// 字体样式
.f-family {
    font-family: PingFangSC-Regular, PingFang SC;
}

.f-td {
    text-decoration: none;
}

// 字体颜色 
.f-color {
    &-bfbfbf {
        color: #bfbfbf;
    }
    &-ffffff {
        color: #ffffff;
    }
    &-000000 {
        color: #000000;
    }
    &-121212 {
        color: #121212;
    }
    &-2e9d70 {
        color: #2e9d70;
    }
    &-444444 {
        color: #444444;
    }
    &-9a9a9a {
        color: #9a9a9a;
    }
}

// 边框
.f-border {
    &-sc {
        border: 1px solid #ccc;
    }
    &-sd {
        border: 1px solid #ddd;
    }
    &-r {
        &-half {
            border-radius: 50%;
        }
        &-3 {
            border-radius: 3px;
        }
        &-15 {
            border-radius: 15px;
        }
    }
}

// 透明度
.f-opacity {
    &-2 {
        opacity: 0.2;
    }
    &-3 {
        opacity: 0.3;
    }
    &-5 {
        opacity: 0.5;
    }

}

// 定位
.f-position {
    &-r {
        position: relative;
    }
    &-a {
        position: absolute;
        &-l {
            &--1 {
                left: -1px;
            }
            &-0 {
                left: 0;
            }
            &-2 {
                left: 2px;
            }
            &-5 {
                left: 5px;
            }
            &-6 {
                left: 6px;
            }
            &-half {
                left: 50%;
            }
        }
        &-r {
            &--1 {
                right: -1px;
            }
            &-0 {
                right: 0;
            }
        }
        &-t {
            &--2 {
                top: -2px;
            }
            &--1 {
                top: -1px;
            }
            &-0 {
                top: 0;
            }
            &-2 {
                top: 2px;
            }
            &-5 {
                top: 5px;
            }
            &-6 {
                top: 6px;
            }
        }
        &-b {
            &--1 {
                bottom: -1px;
            }
            &-0 {
                bottom: 0;
            }
        }
    }
    &-f {
        position: fixed;
    }
    &-s {
        position: static;
    }
}

// 位移transform
.f-trans {
    &-rotate {
        &--45 {
            transform: rotate(-45deg);
        }
        &-45 {
            transform: rotate(45deg);
        }
        &-90 {
            transform: rotate(90deg);
        }
    }
    &-x {
        transform: translateX(-50%);
    }
}

// 背景
.f-back {
    &-s {
        background-size: cover;
    }
    &-c {
        &-ffffff {
            background-color: #fff;
        }
        &-cccccc {
            background-color: #ccc;
        }
    }
}

// 内边距
.f-p {
    &-l {
        &-9 {
            padding-left: 9px;
        }
        &-21 {
            padding-left: 21px;
        }
        &-36 {
            padding-left: 36px;
        }
    }
}

// 外边距
.f-m {
    &-auto {
        margin: auto;
    }
    &-2 {
        margin: 2px;
    }
    &-t {
        &-1 {
            margin-top: 1px;
        }
        &-5 {
            margin-top: 5px;
        }
        &-6 {
            margin-top: 6px;
        }
        &-9 {
            margin-top: 9px;
        }
        &-17 {
            margin-top: 17px;
        }
        &-18 {
            margin-top: 18px;
        }
        &-19 {
            margin-top: 19px;
        }
        &-22 {
            margin-top: 22px;
        }
        &-23 {
            margin-top: 23px;
        }
        &-28 {
            margin-top: 28px;
        }
        &-39 {
            margin-top: 39px;
        }
        &-42 {
            margin-top: 42px;
        }
        &-43 {
            margin-top: 43px;
        }
        &-46 {
            margin-top: 46px;
        }
        &-132 {
            margin-top: 132px;
        }
        &-208 {
            margin-top: 208px;
        }
    }
    &-b {
        &-8 {
            margin-bottom: 8px;
        }
        &-10 {
            margin-bottom: 10px;
        }
        &-43 {
            margin-bottom: 43px;
        }
        &-87 {
            margin-bottom: 87px;
        }
    }
    &-l {
        &-2 {
            margin-left: 2px;
        }
        &-10 {
            margin-left: 10px;
        }
        &-12 {
            margin-left: 12px;
        }
        &-15 {
            margin-left: 15px;
        }
        &-18 {
            margin-left: 18px;
        }
        &-24 {
            margin-left: 24px;
        }
    }
    &-r {
        &-6 {
            margin-right: 6px;
        }
        &-9 {
            margin-right: 9px;
        }
        &-10 {
            margin-right: 10px;
        }
        &-27 {
            margin-right: 27px;
        }
        &-42 {
            margin-right: 42px;
        }
    }
}

// 盒子模型
.f-b-box {
    box-sizing: border-box;
}

// 元素类型转化
.f-display {
    &-b {
        display: block;
    }
    &-i {
        display: inline;
    }
    &-ib {
        display: inline-block;
    }
    &-f {
        display: flex;
    }
}

// ul前面的样式
.f-list-s {
    list-style: none;
}

// 浮动
.f-float {
    &-l {
        float: left;
    }
    &-r {
        float: right;
    }
}